<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        .game{
            position: relative;
            width: 800px;
            height: 600px;
            margin: 0 auto;
            overflow: hidden;
        }
        .sky {
            position: absolute;
            width: 200%;
            height: 100%;
            background-image: url('./img/sky.png');
            margin: 0 auto;
        }

        .game .bird {
            background: url("./img/bird.png");
            position: absolute;
            width: 33px;
            height: 26px;
            left: 150px;
            top: 150px;
        }

        .game .bird.swing1{
            background-position: -8px -10px;
        }

        .game .bird.swing2{
            background-position: -60px -10px;
        }

        .game .bird.swing3{
            background-position: -113px -10px;
        }
        .pipeDown{
            position: absolute;
            background-image: url('./img/pipeUp.png');
            width: 52px;
            height: 100px;
            left: 500px;
            bottom: 112px;
        }

        .pipeUp{
            position: absolute;
            background-image: url('./img/pipeDown.png');
            background-position: bottom;
            width: 52px;
            height: 100px;
            left: 500px;
            top: 0;
        }
        .ground{
            position: absolute;
            background-image: url('./img/land.png');
            width: 200%;
            height: 112px;
            left: 0;
            bottom: 0;
        }

        .score{
            position: absolute;
            width: 100px;
            height: 36px;
            background-color: lightblue;
            right: 0;
            top: 0;
            text-align: center;
            line-height: 36px;
            font-size: 24px;
            z-index: 100;
        }
        p{
            text-align: center;
        }


    </style>
</head>
<body>
    <div class="game">
        <div class="sky"></div>
        <div class="bird swing1"></div>
        <div class="ground"></div>
        <div class="score">0</div>
    </div>
    <p>按w或者按上开始游戏</p>

    <script src="./JS/Rectangle.js"></script>
    <script src="./JS/Sky.js"></script>
    <script src="./JS/Land.js"></script>
    <script src="./JS/Bird.js"></script>
    <script src="./JS/Pipe.js"></script>
    <script src="./JS/Game.js"></script>
</body>
</html>